<template>
  <view>
    <view class="head bg-yellow p-b-20">
      <u-navbar
        title="余额提现"
        :autoBack="true"
        bgColor="#1D1D20"
        :placeholder="true"
        leftIconColor="#ffffff"
        :titleStyle="{ color: '#ffffff' }"
      />
      <view class="flex justify-between m-lr-30 m-tb-40">
        <view class="text-white">
          <view class="font-32">可使用余额</view>
          <view class="font-48 text-bold margin-top-sm">{{
            userInfo.balance || 0
          }}</view>
        </view>
        <view class="record-btn" @click="toRecord">提现记录</view>
      </view>
      <view class="bg-white margin radius-6 padding-lr p-t-20 p-b-15">
        <view class="flex">
          <view class="font-34 text-black3 text-bold">可提现余额</view>
        </view>
        <view class="form-box">
          <view class="item">
            <input
              type="number"
              placeholder="请输入提现金额"
              v-model="amount"
              :min="10"
            />
            <view class="all-btn" @click="handleAll">全部</view>
          </view>
          <view class="bg-white">
            <view class="font-32 p-t-30">上传收款码</view>
            <view>
              <u-upload
                class="m-t-20"
                :fileList="fileList1"
                @afterRead="afterRead"
                @delete="deletePic"
                name="1"
                multiple
                :maxCount="1"
              />
            </view>
          </view>
          <view class="p-t-20 bg-white"
            >提现手续费：{{ serviceCharge | getServiceCharge(amount) }}</view
          >
        </view>
        <view class="bottomBtn" @tap="exchange">确认提现</view>
      </view>
    </view>
  </view>
</template>

<script>
import { uploadFile } from "@/common/utils/uploadImg.js";
import { customerInfo } from "@/common/api/customer.js";
import { toWithdrawal } from "@/common/api/xyc.js";
import {
  transferToTrRate,
  transferToTr,
  checkAdsAccount,
} from "@/common/api/advertising.js";
export default {
  data() {
    return {
      amount: null,
      conRate: 0,
      preRate: 0,
      rateData: {},
      pointAcountData: {},
      userInfo: {},
      fileList1: [],
      fileImg: [], //上传的收款码
	  serviceCharge: 0,
    };
  },
  filters: {
    getServiceCharge(val, amount) {
      let money = 0;
      if (amount > 0) {
        money = (Number(amount) * 0.1).toFixed(2);
      } else {
        money = 0;
      }
      return money;
    },
  },
  onLoad() {
    // this.getTransferToTrRate()
    // this.getPointAccount()
    this.getCustomerInfo();
  },
  methods: {
    // 删除图片
    deletePic(event) {
      this.form.certificateUrls.splice(event.index, 1);
      this.fileList1.splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      const result = await this.uploadFilePromise(event.file[0].url);
      if (result.data) {
        this.fileList1.push({ url: result.data[0].browseUrl });
        this.fileImg.push(result.data[0].browseUrl);
      }
    },
    // 上传图片
    uploadFilePromise(file) {
      return new Promise((resolve, reject) => {
        let res = uploadFile(file, 9);
        resolve(res);
      });
    },
    // 获取用户信息
    getCustomerInfo() {
      customerInfo().then((res) => {
        this.userInfo = res.data.user || {};
        this.$store.commit("user/setUserInfo", res.data.user || {});
      });
    },
    //广告收益
    getPointAccount() {
      checkAdsAccount().then((res) => {
        if (res.code === 200) {
          this.pointAcountData = res.data;
        }
      });
    },
    //获取行权比例
    getTransferToTrRate() {
      transferToTrRate().then((res) => {
        if (res.code === 200) {
          this.rateData = res.data;
        }
      });
    },
    toRecord() {
      uni.navigateTo({
        url: "/pages/my/advertising/pointExchangeRecords",
      });
    },
    handleAll() {
      this.amount = this.userInfo.balance || 0;
    },
    handelAmount1() {
      return (
        (this.amount * Number(this.rateData.contributionRate)).toFixed(2) || 0
      );
    },
    handelAmount2() {
      return (
        (this.amount * Number(this.rateData.preBalanceRate)).toFixed(2) || 0
      );
    },
    exchange() {
      if (!this.amount) {
        return this.$msg("提现金额不能为空");
      }
      if (this.amount < 10) {
        return this.$msg("提现金额不能小于10元");
      }
      if (this.fileImg.length == 0) {
        return this.$msg("请上传收款二维码");
      }
      if (this.amount > this.userInfo.balance) {
        return this.$msg("提现金额不能大于余额");
      }
      uni.showLoading({
        title: "提现中",
        mask: true,
      });
      let data = {
        amount: this.amount,
        withdrawUrl: this.fileImg[0],
      };
      toWithdrawal(data)
        .then((res) => {
          uni.hideLoading();
          this.$msg("提现申请操作成功");
          if (res.code == 200) {
            this.amount = null;
            this.getCustomerInfo();
            this.fileList1 = [];
            this.fileImg = [];
          }
        })
        .catch((err) => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f2f3f5;
}
</style>
<style lang="scss" scoped>
.head {
}
.record-btn {
  width: 148rpx;
  height: 48rpx;
  background: #ffffff;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  opacity: 1;
  border: 1rpx solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #eca52b;
}
.form-box {
  width: 100%;
  border-radius: 16rpx;
  background: #f2f3f5;
  margin-top: 30rpx;
  .item {
    display: flex;
    align-items: center;
    width: 100%;

    input {
      font-size: 28rpx;
      flex: 1;
      display: block;
      height: 92rpx;
      line-height: 92rpx;
      outline: none;
      border: 0px;
      padding-left: 30rpx;
    }
    input::placeholder {
      font-size: 28rpx;
      color: #999999;
    }
    .all-btn {
      width: 200rpx;
      height: 76rpx;
      background-color: #eca52b;
      // background: linear-gradient(42deg, #ECA52B 0%, #FC7844 100%);
      font-size: 32rpx;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16rpx;
      margin-right: 8rpx;
    }
  }
}

.bottomBtn {
  width: 622rpx;
  height: 88rpx;
  background-color: #eca52b;
  // background: linear-gradient(42deg, #ECA52B 0%, #FC7844 100%);
  box-shadow: 0 2rpx 10rpx 1rpx rgba(250, 49, 33, 0.24);
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #ffffff;
  margin: 80rpx auto 30rpx auto;
}
</style>
